<!-- 设置面板 -->
<template>
    <transition name="setting-pane-fade">
        <div
            v-if="show"
            ref="drawerRef"
            class="setting-pane"
            :style="{
                width,
                zIndex
            }"
        >
            <slot></slot>
            <div v-if="showClose" class="setting-pane-bottom">
                <el-button type="primary" @click.stop="onClose">关闭</el-button>
            </div>
        </div>
    </transition>
    <div
        v-if="show && modal"
        class="setting-pane-mark"
        :style="{ zIndex: zIndex - 1 }"
        @click="onClose"
    ></div>
</template>

<script>
import { defineComponent, toRefs, ref } from 'vue'
export default defineComponent({
    name: 'SettingPane',
    props: {
        // 显示状态
        show: {
            type: Boolean,
            default: false
        },
        // 显示关闭按钮
        showClose: {
            type: Boolean,
            default: false
        },
        // 是否需要遮罩层
        modal: {
            type: Boolean,
            default: false
        },
        // 宽度
        width: {
            type: String,
            default: '321px'
        },
        // 层级
        zIndex: {
            type: [String, Number],
            default: 3
        }
    },
    emits: [
        'update:show'
    ],
    setup(props, { emit }) {
        const { show, showClose, modal, width, zIndex } = toRefs(props)

        const drawerRef = ref(null)

        const onClose = () => {
            emit('update:show', false)
        }

        return {
            show,
            showClose,
            modal,
            width,
            zIndex,

            drawerRef,

            onClose
        }
    }
})
</script>

<style lang="less">
@import './setting-pane.less';
</style>